import Vue from 'vue'
import VueRouter from 'vue-router'
import { createRouter } from 'vue-router'

// import Home from "@/views/Home/index"
// import Login from '@/views/Login/index'
// import Register from '@/views/Register/index'
// import Search from '@/views/Search/index'
// import Detail from '@/views/Detail/index'
// import AddCartSucess from '@/views/AddCartSuccess/index'
// import ShopCart from '@/views/ShopCart/index'
import store from '@/store/index'
// import Trade from '@/views/Trade/index'
// import Pay from '@/views/Pay/index'
// import PaySuccess from '@/views/PaySuccess/index'
// import Center from '@/views/Center/index'
// 二级路由
import MyOrder from '@/views/Center/MyOrder/index'
import GroupOrder from '@/views/Center/GroupOrder/index'

Vue.use(VueRouter)
/* 
  路由懒加载：打包构建应用时，JavaScript 包会变得非常大，影响页面加载。
  如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的
  时候才加载对应组件，这样就会更加高效。
*/
const Home = () => import('@/views/Home/index')
const Login = () => import('@/views/Login/index')
const Register = () => import('@/views/Register/index')
const Search = () => import('@/views/Search/index')
const Detail = () => import('@/views/Detail/index')
const AddCartSucess = () => import('@/views/AddCartSuccess/index')
const ShopCart = () => import('@/views/ShopCart/index')
const Trade = () => import('@/views/Trade/index')
const Pay = () => import('@/views/Pay/index')
const PaySuccess = () => import('@/views/PaySuccess/index')
const Center = () => import('@/views/Center/index')

const routes = [
  { path: '/', redirect: '/home' },
  { path: '/home', component: Home, meta: { show: true } },
  { path: '/login', component: Login, meta: { show: false } },
  { path: '/register', component: Register, meta: { show: false } },
  { path: '/search/:keyworld?', component: Search, meta: { show: true }, props: true, name: 'search' },//props只是开启属性传参
  { path: '/detail/:skuid', component: Detail, meta: { show: true } },
  { path: '/addcartscucess', component: AddCartSucess, meta: { show: true }, name: 'addcartscucess' },
  { path: '/shopcart', component: ShopCart, meta: { show: true } },
  {
    path: '/trade', component: Trade, meta: { show: true },
    //路由独享守卫
    beforeEnter: (to, from, next) => {
      if (from.path == '/shopcart') {
        next()
      } else {
        next(from.path)
      }
    }
  },
  {
    path: '/pay', component: Pay, meta: { show: true },
    //路由独享守卫
    beforeEnter: (to, from, next) => {
      if (from.path == '/trade') {
        next()
      } else {
        next(from.path)
      }
    }
  },
  { path: '/paysuccess', component: PaySuccess, meta: { show: true } },
  {
    path: '/center', component: Center, meta: { show: true },
    children: [
      { path: '/center', redirect: 'myorder' },
      { path: 'myorder', component: MyOrder },
      { path: 'grouporder', component: GroupOrder },
    ]
  },
]

const router = new VueRouter({
  routes,
  scrollBehavior(to, from, savedPosition) {//跳转到新页面的位置
    return { y: 0 }
  }
})

router.beforeEach(async (to, from, next) => {
  // console.log(store.state.user.token);
  let token = store.state.user.token
  // let name = store.state.user.userinfo.data.name
  next()
  //用户已经登录了
  //#region 
  /*     if (token) {
        //用户已经登录了但想去login
        if (to.path == '/login'||to.path=='/register') {
          next('/')
        } else {
          //登录了，但是没有去login
          if (name) {
            //如果用户名已有
            next()
          } else {
            //用户名没有
            try {
              await $store.dispatch('getUserInfo')
              next()
            } catch (error) {
              // token失效重新登陆
              // await $store.dispatch('userLogOut')
              next('login')
            }
          }
        }
      } else {
        //未登录
        next()
      } */
  //#endregion

  if (token) {
    next()
  } else {
    //未登录;不能去交易相关的页面，（pay|paysuccess）
    let path = ['/pay', '/paysuccess', '/trade', '/center', '/center/myorder']
    if (path.indexOf(to.path) != -1) {
      next('/login?redirect=' + to.path)
    } else {
      next()
    }
  }
})

export default router
